/**
 * 目标1：渲染图书列表
 *  1.1 获取数据
 *  1.2 渲染数据
 */
//1、渲染图书列表
//给自己起一个外号
const creator = 'xiaoxun'
function getBooks() {
  axios({
    url: 'https://hmajax.itheima.net/api/books',
    method: 'get',
    params: {
      creator
    }
  }).then((res) => {
    console.log(res)
    const books = res.data.data
    console.log(books)

    const bookStr = books.map((item, i) => {
      return `
          <tr>
              <td>${i + 1}</td>
              <td>${item.bookname}</td>
              <td>${item.author}</td>
              <td>${item.publisher}</td>
              <td data-id="${item.id}">
                <span class="del">删除</span>
                <span class="edit">编辑</span>
              </td>
          </tr>
      `
    })
    document.querySelector('.list').innerHTML = bookStr.join('')
  })
}
getBooks()

//2、新增图书数据
//2.1显示隐藏弹窗
const modalAdd = new bootstrap.Modal(document.querySelector('.add-modal'))
document.querySelector('.plus-btn').addEventListener('click', () => {
  modalAdd.show()
})
//隐藏弹窗
document.querySelector('.btn-close').addEventListener('click', () => {
  modalAdd.hide()
})
//增加按钮：提交数据、隐藏弹窗
document.querySelector('.add-btn').addEventListener('click', () => {
  const addFrom = document.querySelector('.add-form')
  //收集用户数据
  const data = serialize(addFrom, { hash: true, empt: true })
  console.log(data)
  //数据提交
  axios({
    url: 'https://hmajax.itheima.net/api/books',
    method: 'post',
    data: {
      creator, //图书创建者
      ...data //展开data对象
    }
  }).then((res) => {
    //隐藏弹窗
    modalAdd.hide()
    //更新数据
    getBooks()
    //清空表单：reset
    addFrom.reset()
  })
})
//3、删除图书
//3.1绑定点击事件：时间委托
document.querySelector('.list').addEventListener('click', (e) => {
  // console.log(e.target) //获取出发事件元素
  if (!e.target.classList.contains('del')) {
    return
  }
  console.log('点了删除按钮')
  //获取图书id
  const { id } = e.target.parentNode.dataset
  axios({
    url: `https://hmajax.itheima.net/api/books/${id}`,
    method: 'delete'
  }).then((res) => {
    getBooks()
  })
})

//4、编辑图书
//4.1、获取数据
const editModel = new bootstrap.Modal(document.querySelector('.edit-modal'))
//点击编辑获取数据，采用事件委托绑定
document.querySelector('.list').addEventListener('click', (e) => {
  if (!e.target.classList.contains('edit')) {
    return
  }
  console.log('你点击了编辑按钮')
  //获取图书id
  const { id } = e.target.parentNode.dataset
  console.log(`编辑图书id：${id}`)
  axios({
    url: `https://hmajax.itheima.net/api/books/${id}`,
    method: 'get'
  }).then((res) => {
    console.log(res.data.data)
    const book = res.data.data
    //设置获取到的图书数据
    // document.querySelector('.edit-modal .id').value = book.id
    // document.querySelector('.edit-modal .bookname').value = book.bookname
    // ocument.querySelector('.edit-modal .author').value = book.author

    //循环设置数据
    Object.keys(book).forEach((v) => {
      document.querySelector(`.edit-modal .${v}`).value = book[v]
    })

    editModel.show()
  })
})

//4.3、保存修改
document.querySelector('.edit-btn').addEventListener('click', (e) => {
  console.log('点了修改')
  //获取表单中的数据
  const { bookname, author, id, publisher } = serialize(
    document.querySelector('.edit-form'),
    {
      hash: true,
      empty: true
    }
  )

  axios({
    url: `https://hmajax.itheima.net/api/books/${id}`,
    method: 'put',
    data: {
      bookname,
      author,
      publisher,
      creator
    }
  }).then((res) => {
    getBooks()
    editModel.hide()
  })
})
